<!-- HomePage.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>培训界面</title>
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/aui.css">
	    <link rel="stylesheet" type="text/css" href="../../css/news.css">

	</head>

    <style type="text/css" media="screen">
    body{
    	padding: 0px;margin: 0px;
    }
    .topFrame{
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 50px;
      margin-top: 190px; 
      /*background-color: red;*/
    }
    .leftSpan{
      width:120px;
      height: 60px;
      float: left;
      /*background-color: red;*/
    }
    .rightSpan{
      width:200px;
      height: 60px;
      loat: left;
      margin-left: 15px;
      /*background-color: black;*/
    }
    .contentFirst{
      width: 100px;
      height: 40px;
      font-size: 24px; 
      margin-top:10px;
      margin-left: 15px;
    }
    .initBtn{
    	margin-top: 15px;
      width: 55px;
      height: 25px;
      background-color: gray;
      border: solid 1px gray; 
      text-align: center; 
      font-size: 12px; 
      color: white;
      float: left;
      padding-top: 2px;
    }
    .selectedBtn{
      background-color: red;
      border: solid 1px red;
    }
    /**********************/
    .trainList{
    	width: 100%;
    	height: 120px;
      clear:both;
      border: solid 1px #E4E4E4;
      padding-top: 10px;
      padding-bottom: 10px;
      overflow: hidden;
    }
    .mediaLeft{
    	width: 35%;
      height: auto;
      float: left; 
      margin-left:5px; 
      position:relative;
      background-color: gray;
    }
    .leftImg{
      position:
      absolute;
    }
    .runState{
      position: absolute;
      width: 40px;
      height: 20px;
      float: left;
      border: solid 1px red;
      color: white;
      background-color: red;
      text-align: center;
      font-size: 10px;
      padding-top: 2px;
    }
    .finishState{
      border: solid 1px gray;
      background-color: gray;
    }

    .mediaRight{
    	width: 60%;
      height: auto;
      float: right; 
      margin-right:5px;
    }
    .mediaTitle{
       font-size: 14px;
       color: black;
    }
    .mediaTime{
       font-size: 12px;
       color: black;
       margin-top: 5px;
    }
    .mediaPersonPlace{
       font-size: 12px;
       color: black;
    }
    .baomingBtn{
    	width: 65px;
    	height: 25px;
    	float: right;
    	/*padding-top: 2px;
    	margin-right: 5px;*/
      right: 5px;
      bottom: 2px;
    	border: solid 1px blue;
    	color: blue;
    	text-align: center;
    	font-size: 12px;
    }
    .yibaomingBtn{
      border: solid 1px gray;
      color: gray;
    }
    
    /**********************/
    .latestNewsSection{
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 50px;
      position: relative;
      /*background-color: gray;*/
    }
    .moreBtn{
      float: right;
      /*background-color: yellow;*/
      width: 40px;  
      height: 23px; 
      padding-top: 3px;  
      margin-top: 15px;
      margin-right: 5px;
      font-size: 12px;

    }
    .henggang{
      width: 94%; 
      height: 3px;
      background-color: #C4C4C4; 
      margin-left: 3%;
      margin-top: 48px;
      position: absolute;
    }
     /**********************/
    .latestNewsList{
      clear: both;
      width: 100%;
      height: 40px;
      padding: 5px;
    }
    .latestNewsTitle{
      float: left;
      width: 76%;
      height: 20px;
      font-size: 14px;
      margin-left: 5px;
      overflow: hidden;
    }
    .latestNewsTime{
      float: right;
      width: 20%;
      height:15px;
      font-size: 12px;
      margin-right: 5px;
      text-align: center;
    }
    .xuxian{
      clear: both; 
      border:1px dotted gray;
      margin-top: 30px;
      width: 96%; 
      margin-left: 2%;
    }
    </style> 

	<body>
    <div id="main" hidden="hidden">
      

		<div class="topFrame">
	    	<span class="leftSpan">
	    		<span class="contentFirst" >近期培训</span>
	    	</span>
	    	<span class="rightSpan" id="processedBtnArr">
	    		<span class="initBtn selectedBtn" id="selectAll" onclick="selectProgress(0)">全部</span>
	    		<span class="initBtn" id="selectGoingOn" onclick="selectProgress(1)" >进行中</span>
	    		<span class="initBtn" id="selectFinish"  onclick="selectProgress(2)">已结束</span>
	    	</span>
		</div> 
    
      
      <div class="mainTrain " id="mainTrain">  
  	    <div class="trainList " id="trainList">  

  	    </div>
	  
      </div>

	  <div class="latestNewsSection">
        <span class="leftSpan">
          <span class="contentFirst" >最新动态</span>
        </span>
        <span class="moreBtn">更多>></span>
        <div class="henggang">
          
        </div>
        
    </div> 
    <div class="latestNewsList">
        <div class="latestNewsTitle">
           关于"物流创新实验教学师资能力提升培训"开班通知
        </div>
        <div class="latestNewsTime">
          2017-04-05
        </div>
        <div class="xuxian">
        </div>

    </div>
    <div class="latestNewsList">
        <div class="latestNewsTitle">
           关于"物流创新实验教学师资能力提升培训"开班通知
        </div>
        <div class="latestNewsTime">
          2017-04-05
        </div>
        <div class="xuxian">
        </div>

    </div>
    <div class="latestNewsList">
        <div class="latestNewsTitle">
           关于"物流创新实验教学师资能力提升培训"开班通知
        </div>
        <div class="latestNewsTime">
          2017-04-05
        </div>
        <div class="xuxian">
        </div>

    </div>
    <div class="latestNewsList">
        <div class="latestNewsTitle">
           关于"物流创新实验教学师资能力提升培训"开班通知
        </div>
        <div class="latestNewsTime">
          2017-04-05
        </div>
        <div class="xuxian">
        </div>

    </div>
    <div class="latestNewsList">
        <div class="latestNewsTitle">
           关于"物流创新实验教学师资能力提升培训"开班通知
        </div>
        <div class="latestNewsTime">
          2017-04-05
        </div>
        <div class="xuxian">
        </div>

    </div>

    </div>

    <div class="noSign"   id="noData"  hidden="hidden">
        <img src="../../image/icon_img.png" width="60%">
        <p class="font16 top_15 base_dark_grey" >
          暂无数据
        </p>
      </div>
      <div class="loadFailure" hidden="hidden" id="noNet">
        <img src="../../image/icon_img01.png" width="60%">
        <p class="" >
          数据加载失败
        </p>
        <p>
          请检查您的网络
        </p>
        <button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
          重新加载
        </button>
    </div>  

		

	</body>
	<script type="text/javascript" src="../../script/jquery.min.js" ></script>
	<script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/MD5.js"></script>
  <script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">

    var dataList = [];
		apiready = function() {

      loadNewData();

       
  		};


    function loadNewData () {
         
      showProgress();

      var params = { 
        page : 5,
        rows : 5

      };    
      cfnetppPOST('http://base.cfnet.org.cn/index.php/user/Userlogin/app_Index', params, true, function(data, status) {
        api.hideProgress();
        api.refreshHeaderLoadDone();
        if (status == 'success') {
          
          $('#noNet').hide();
          $('#main').show();
          if (data.code == 200) {
            ScrollPicture();

            var dataSource = [{
              "id" : 49164,
              "litpic": "http://cfnet.org.cn/uploads/170119/1-1F119163422259-lp.jpg",
              "title": "阿里与世界货运联盟合作，扩大集团物流服务网络",
              "persons" : 20,
              "time": "2017年2月22日-4月30日",
              "place":"青岛",
              "registered":1,
              "process":1

            },{ 
              "id" : 39773,
              "litpic": "http://cfnet.org.cn/uploads/170119/1-1F119163422259-lp.jpg",
              "title": "阿里与世界货运联盟合作，扩大集团物流服务网络",
              "persons" : 20,
              "time": "2017年2月22日-4月30日",
              "place":"青岛",
              "registered":0,
              "process":2
            },{
              "id" : 75433,
              "litpic": "http://cfnet.org.cn/uploads/170119/1-1F119163422259-lp.jpg",
              "title": "阿里与世界货运联盟合作，扩大集团物流服务网络",
              "persons" : 20,
              "time": "2017年2月22日-4月30日",
              "place":"青岛",
              "registered":2,
              "process":0
            }];
            initTrainList(dataSource);

            dataList = dataSource;


            }else{
         $('#listData').hide();
         $('#noData').show();
         $('#noNet').hide();
        }
      }else{
          $('#listData').hide();
        $('#noData').hide();
        $('#noNet').show();
        
      }
    });
  }
		

    //轮播图
    function ScrollPicture(){
    var UIScrollPicture = api.require('UIScrollPicture');
      UIScrollPicture.open({
          rect: {
            x: 0,
            y: 0,
            w: api.winWidth,
            h: 190
          },
          data: {
            paths : [
              // data[0].picture,
              // data[1].picture,
              // data[2].picture,
              // data[3].picture,
              // data[4].picture,
              'widget://image/firstNewsTitls1.png',
              'widget://image/firstNewsTitls2.png',
              'widget://image/firstNewsTitls3.png'
              
            ],
          },
          styles: {
            caption: {
                height: 35,
                color: '#E0FFFF',
                size: 13,
                bgColor: '#696969',
                position: 'bottom'
            },
            indicator: {
                align: 'center',
                color: '#FFFFFF',
                activeColor: '#DA70D6'
            }
          },
          placeholderImg: 'image/dota.jpg',
          contentMode: 'scaleToFill',
          interval: 5,
          fixedOn: api.frameName,
          loop: true,
          fixed: false
        },function(ret,err){

          // if(clic){
          //   alert("您点击了第"+ret.index+"张轮播图");
          // }else{
          //   clic = true;
          // }

        });
        }

      function initTrainList(dataSource){
          var str = "";
          
      for(var i=0;i<dataSource.length;i++){
          var subData = dataSource[i];
          
          var registered = "";
          if (subData.registered == 1) {
              // registered = "baomingBtn yibaomingBtn";
              // $('#baomingBtn').text = "已报名";
              registered = '<span class="baomingBtn yibaomingBtn" id="baomingBtn">已报名</span>';
          }else if (subData.registered == 0) {
              // registered = "baomingBtn ";
              // $('#baomingBtn').text = "我要报名";
              registered = '<span class="baomingBtn " id="baomingBtn" onclick=baomingClick('+subData.id+') >我要报名</span>';
          }else if (subData.registered == 2) {

          }
          var processed = ""; 
          if (subData.process  == 1) {
              // processed = "runState";
              // $('#runState').text = "进行中";
              processed = '<span class="runState" id="runState">进行中</span>';
          }else if (subData.process  == 0) {
              // processed = "runState finishState";
              // $('#runState').text = "已结束";
              processed = '<span class="runState finishState" id="runState">已结束</span>';
          }else if (subData.process  == 2) {
              
          }


          str  += '<div class="trainList " id="trainList" onclick=clickCell('+subData.id+')>'+  

          '<div class="mediaLeft " >'+
             '<img class="leftImg" src="'+subData.litpic+'" alt="">'+processed+'</div>'+
            '<div class="mediaRight" >'+
              '<div class="mediaTitle" >'+
                subData.title+
              '</div>'+
              '<div class="mediaTime">'+"时间:"+subData.time+
              '</div>'+
              '<span class="mediaPersonPlace">'+"人数:"+subData.persons+'&nbsp;&nbsp;&nbsp;&nbsp;'+"地点:"+subData.place+'</span>'+
                registered+
            '</div>'+'</div>';
          
    }
          

        $('#mainTrain').html(str);

        }

        
        function clickCell (index) {
            api.openWin({useWKWebView:true,
                name: 'trainingDetails',
                url: 'trainingDetails.html',
                pageParam: {
                    id: index
                }
            });
        }

        function baomingClick (index) {
            api.openWin({useWKWebView:true,
                name: 'registerPage',
                url: 'registerPage.html',
                pageParam: {
                    id: index
                }
            });
            event.cancelBubble=true;
        }

        function selectProgress (index) {
            $('#selectAll').removeClass("selectedBtn");
            $('#selectGoingOn').removeClass("selectedBtn");
            $('#selectFinish').removeClass("selectedBtn");

            var str = "";
            var tmpArr = [];
            for (var i = 0; i < dataList.length; i++){

                var subData = dataList[i];
                if (index == 0) {
                  
                  tmpArr.push(subData);
                  
                }else if (index == 1) {
                  if (subData.process == 1) {
                  tmpArr.push(subData);
                  }
                }else if (index == 2) {
                  if (subData.process == 0) {
                  tmpArr.push(subData);
                  }
                }
            } 

            initTrainList(tmpArr);

            if (index == 0) {
              $('#selectAll').addClass("selectedBtn");


            }else if (index == 1) {
              $('#selectGoingOn').addClass("selectedBtn");


            }else if (index == 2) {
              $('#selectFinish').addClass("selectedBtn");


            }

        }




		
	</script>
</html>